<template>
	<view class="content">
		<view class="wallet">
			<view class="all">
				<view class="txt">资产总额</view>
				<view class="num">{{uinfo.money}}</view>
			</view>
			<view class="shengyu">
				<view class="txt">可用余额</view>
				<view class="num">{{uinfo.money}}</view>
			</view>
			<view class="shengyu">
				<view class="txt">冻结余额</view>
				<view class="num">0.00</view>
			</view>
			<view class="clear"></view>
		</view>
		<view class="rechargelog">
			<view class="tit">充值记录</view>
			<view class="lists">
				<view v-if="list.length==0" class="nolist">
					暂无充值记录
				</view>
				<view class="list" v-for="(item,index) in list" v-if="list.length>0">
					<view class="price">充值金额￥{{item.money}}</view>
					<view class="date">{{item.createtime}}</view>
				</view>
			</view>
		</view>
		<view class="chongzhi">
			<u-button type="primary" text="充值" icon="rmb-circle" color="#23BF61" size="large" @click="chongzhi"></u-button>
		</view>
		<com-login ref="login" @myevent="uinfos"></com-login>
		<com-tabbar :currentTab="currentTab"></com-tabbar>
	</view>
</template>

<script>
	let that
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				currentTab:"wallet",
				uinfo:[],
				list:[]
			}
		},
		onShow() {
			// #ifndef MP-WEIXIN
			uni.hideTabBar()
			// #endif
			//判断登陆状态
			if(!this.loginState){
				this.$refs.login.openLogin()
				return
			}
			this.uinfo = this.userInfo
			this.getlist()
		},
		mounted() {
			that = this
		},
		computed: {
			//引入store全局变量
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			//获取充值列表
			getlist(){
				this.$http_api.rechargelog({
					uid:this.userInfo.id
				}).then((res)=>{
					that.list = res
				})
			},
			//跳转充值
			chongzhi:function(){
				//判断登陆状态
				if(!this.loginState){
					this.$refs.login.openLogin()
					return
				}
				uni.navigateTo({
					url:'/pages/wallet/wallet-detail'
				})
			},
			//子组件给父组件传值
			uinfos(e){
				this.uinfo = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 40rpx 3%;
		box-sizing: border-box;
	}
	.wallet{
		width: 100%;
		background: url('../../static/wallet-big.png') no-repeat center;
		background-size: cover;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		text-align: center;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		color: #fff;
		.all{
			width: 100%;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #e4e4e4;
			.num{
				font-size: 44rpx;
			}
		}
		.shengyu{
			width: 50%;
			float: left;
			.txt{
				color: #fff;
			}
		}
		.txt{
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.num{
			font-size: 40rpx;
			font-weight: bold;
		    // font-family: -webkit-pictograph;
		}
	}
	.log{
		width: 100%;
		background: #fff;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		text-align: center;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
	.chongzhi{
		position: fixed;
		bottom: 15%;
		width: 93%;
	}
	.rechargelog{
		box-shadow:0px 0px 6px #dfdfdf;
		padding: 5% 3%;
		box-sizing: border-box;
		color: #333;
		.tit{
			font-size: 32rpx;
			margin-bottom: 40rpx;
			padding-left: 10rpx;
			border-left: 2px solid #23BF61;
		}
		.lists{
			height: 35vh;
			overflow-y: scroll;
			.nolist{
				font-size: 28rpx;
				text-align: center;
				margin-top: 10%;
				color: #999;
			}
			.list{
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				color: #666;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px dashed #dfdfdf;
				.price{}
			}
		}
	}
	
</style>
